<template>
    <div class="div_all">
        <el-row :gutter="80">
            <el-col :span="6">
                <div class="dic">
                    <div class="div_top"><span class="text">角色组</span><span class="add"></span></div>
                    <el-radio-group v-model="roleGroup" fill="#afb7d3" text-color="#303133">
                        <el-radio-button label="默认角色组"></el-radio-button>
                        <el-radio-button disabled label="暂时无法自定义"></el-radio-button>
                    </el-radio-group>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="dic">
                    <div class="div_top"><span class="text">角色</span><span class="add"></span></div>
                    <el-radio-group v-model="role" @change="roleChange" fill="#afb7d3" text-color="#303133" :border="false">
                        <el-radio-button label="项目经理"></el-radio-button>
                        <el-radio-button label="开发工程师"></el-radio-button>
                        <el-radio-button label="测试工程师"></el-radio-button>
                    </el-radio-group>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="dic">
                    <div class="div_top"><span class="text">角色权限配置>{{ roleGroup }}>{{ role }}</span><span class="add"></span></div>
                    <el-tree
                        ref="tree"
                        :data="permissionData"
                        show-checkbox
                        node-key="id"
                        :default-expand-all="true"
                        :default-checked-keys="checkedArrayIsManager"
                        >
                    </el-tree>
                </div>
            </el-col>
        </el-row>
        <div style="margin-top: 30px">
            <el-button class="proButton" @click="save">保存</el-button>
        </div>
        
    </div>
</template>

<script>
import { Tree } from 'element-ui';

export default {
  name: "role",
  data () {
    return {
        roleGroup: "默认角色组",     //角色组绑定的值
        role: "项目经理",            //角色的值
        checkedArrayIsManager: [1,1.1,1.2,1.3,1.4,1.5,2,2.1,2.2,2.3,2.4,2.5,2.6,3,3.1,3.2,3.3,4,4.1,4.2,4.3,5,5.1],            
        checkedArrayIsDeveloper: [1,1.1,1.2,1.3,1.4,1.5,4,4.1],            
        checkedArrayIsTester: [1,1.1,1.2,1.3,1.4,1.5,2,2.1,2.2,2.3,2.4,4,4.1],            
        permissionData: [{
          id: 1,
          label: '缺陷管理',
          disabled: true,
          children: [{
            id: 1.1,
            label: '提交缺陷',
            disabled: true,
          }, {
            id: 1.2,
            label: '修改缺陷',
            disabled: true,
          },{
            id: 1.3,
            label: '追加描述',
            disabled: true,
          },{
            id: 1.4,
            label: '关联用例',
            disabled: true,
          },{
            id: 1.5,
            label: '导入缺陷/导出缺陷',
            disabled: true,
          }]
        },{
          id: 2,
          label: '用例管理',
          disabled: true,
          children: [{
            id: 2.1,
            label: '新增用例',
            disabled: true,
          }, {
            id: 2.2,
            label: '用例删除',
            disabled: true,
          },{
            id: 2.3,
            label: '添加用例附件',
            disabled: true,
          },{
            id: 2.4,
            label: '导入用例/导出用例',
            disabled: true,
          },{
            id: 2.5,
            label: '执行用例',
            disabled: true,
            
          },{
            id: 2.6,
            label: '清空执行状态',
            disabled: true,
          }]
        },{
            id: 3,
            label: '团队管理',
            disabled: true,
            children: [{
            id: 3.1,
            label: '添加人员',
            disabled: true,
          },{
            id: 3.2,
            label: '删除人员',
            disabled: true,
          },{
            id: 3.3,
            label: '修改角色',
            disabled: true,
          }]
        },{
            id: 4,
            label: '文档管理',
            disabled: true,
            children: [{
            id: 4.1,
            label: '下载文档',
            disabled: true,
          },{
            id: 4.2,
            label: '上传文档',
            disabled: true,
          },{
            id: 4.3,
            label: '删除文档',
            disabled: true,
          }]
        },{
            id: 5,
            label: '报表中心',
            disabled: true,
            children: [{
            id: 5.1,
            label: '查看报表',
            disabled: true,
          }]
        }],
    };
  },
  methods:{
    roleChange(label){
        let tree = this.$refs.tree
        if(tree)
        switch(label){
            case '项目经理': tree.setCheckedKeys(this.checkedArrayIsManager);break;
            case '开发工程师': tree.setCheckedKeys(this.checkedArrayIsDeveloper);break;
            case '测试工程师': tree.setCheckedKeys(this.checkedArrayIsTester);break;
        }
    },
    save(){
        this.$message({type:'success',message:'保存成功'})
    }
  }
}
</script>

<style lang="scss" scoped>
    .div_all{
        width: 95%;
        margin-left: 2.5%;
        padding-top: 45px;
    }
    .dic{
        border: 1px solid #DCDFE6;
        height: 400px;
        width: 100%;
        overflow-y:scroll; 
        overflow-x:hidden;
    }
    .div_top{
        width: 100%;
        height: 40px;
        background: #daddeb;
        font-size: 90%;
        line-height: 40px;
        margin-bottom: 10px;
        color: #606266;
    }
    // 角色组字体的样式
    .text{
        margin-left: 15px;
    }
    .add{
        margin-left: calc(100% - 90px);
    }
    .dic ::v-deep {
        .el-radio-button,
        .el-radio-group,
        .el-radio-button__inner{
            width: 100%;
            border: 0;
        }
    } 
</style>